<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>tcp_websocket</title>
    <style>
        table {
            border-collapse: collapse;
            width: 1000px;
            margin: 0 auto;
        }
        table, th, td {
            border: 1px solid #000000;
        }
        tr:first-child {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
        .btn-container {
            text-align: center;
            margin: 20px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<div align="center">
    <table id="deviceTable">
        <tr>
            <th>帧头</th>
            <th>设备ID</th>
            <th>设备类型</th>
            <th>经度</th>
            <th>纬度</th>
            <th>值1</th>
            <th>值2</th>
            <th>值3</th>
            <th>值4</th>
            <th>设备状态</th>
            <th>频段</th>
            <th>信号数</th>
            <th>校验字</th>
            <th>操作</th>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var socket;
    if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    } else {
        console.log("您的浏览器支持WebSocket");
        var cid = "111";
        var reqUrl = "http://localhost:8080/websocket/" + cid;
        socket = new WebSocket(reqUrl.replace("http", "ws"));

        socket.onopen = function () {
            console.log("WebSocket 已连接");
        };

        socket.onmessage = function (msg) {
            console.log("收到数据:", msg.data);
            var data = JSON.parse(msg.data);
            updateTable(data);
        };

        socket.onclose = function () {
            console.log("WebSocket 已关闭");
        };

        socket.onerror = function () {
            alert("WebSocket 发生错误");
        };
    }

   function updateTable(data) {
       if (!data.deviceId) {
           return;
       }
       var table = document.getElementById("deviceTable");
       var rows = table.getElementsByTagName("tr");
       var exists = false;
   
       for (var i = 1; i < rows.length; i++) {
           var cells = rows[i].getElementsByTagName("td");
           if (cells[1].innerText === data.deviceId) { // 如果设备ID已存在，则更新该行
               cells[0].innerText = data.frameHeader;
               cells[2].innerText = data.deviceType;
               cells[3].innerText = data.longitude;
               cells[4].innerText = data.latitude;
               cells[5].innerText = data.value1;
               cells[6].innerText = data.value2;
               cells[7].innerText = data.value3;
               cells[8].innerText = data.value4;
               cells[9].innerText = data.deviceStatus;
               cells[10].innerText = data.frequency;
               cells[11].innerText = data.signal;
               cells[12].innerText = data.check;
               exists = true;
               break;
           }
       }
   
       if (!exists) { // 如果设备ID不存在，则新增行
           var row = table.insertRow();
           row.innerHTML = `
               <td>${data.frameHeader}</td>
               <td>${data.deviceId}</td>
               <td>${data.deviceType}</td>
               <td>${data.longitude}</td>
               <td>${data.latitude}</td>
               <td>${data.value1}</td>
               <td>${data.value2}</td>
               <td>${data.value3}</td>
               <td>${data.value4}</td>
               <td>${data.deviceStatus}</td>
               <td>${data.frequency}</td>
               <td>${data.signal}</td>
               <td>${data.check}</td>
               <td><button onclick='sendMessage(this)'>发送消息</button></td>
           `;
       }
   }
   
   function sendMessage(button) {
       var row = button.parentElement.parentElement;
       var cells = row.getElementsByTagName("td");
       
       var msg = {
           frameHeader: cells[0].innerText,
           deviceId: cells[1].innerText,
           deviceType: cells[2].innerText,
           longitude: cells[3].innerText,
           latitude: cells[4].innerText,
           value1: cells[5].innerText,
           value2: cells[6].innerText,
           value3: cells[7].innerText,
           value4: cells[8].innerText,
           deviceStatus: cells[9].innerText,
           frequency: cells[10].innerText,
           signal: cells[11].innerText,
           check: cells[12].innerText,
           type: "deviceData"
       };
   
       if (socket && socket.readyState === WebSocket.OPEN) {
           console.log("发送数据:", msg);
           socket.send(JSON.stringify(msg));
       } else {
           console.log("WebSocket 未连接");
       }
   }
</script>

</body>
</html>
